import React from 'react'
import { Table, Modal, Input, Button, message } from 'antd';
import { Link } from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import config from '../../assets/config';


export default class studentTable extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			tDate: [],
			loading: false,
			currentPage: 1
		};
	}
	getList = () => {
		this.setState({ loading: true });
		fetch(config.base + "student/list", {
			method: 'GET',
			mode: config.cors,
			headers: { 'Content-Type': 'text/plain;charset=UTF-8' }
		})
			.then(res => { return res.json() })
			.then(rep => {
				const data = []
				if (rep.length == 0) { message.error("暂时没有数据") } else {
					for (let i = 0; i < rep.length; i++) {
						data.push({
							key: rep[i].id,
							address: rep[i].address,
							email: rep[i].email,
							idCardNum: rep[i].idCardNum,
							phone: rep[i].phone,
							realName: rep[i].realName,
							showExpress: false,
						})
					}
					this.setState({
						tDate: data,
						totalPage: data.length,
						loading: false
					})
				}
			})
			.catch((e) => {
				console.log(e.message);
				message.error("网络错误请稍后重试");
				this.setState({ loading: false })
			})
	}
	checkExperience(num, key) {
		const { tDate } = this.state;
		tDate[num].showExpress = true;
		this.setState({tDate});
		fetch(config.base + "student/experience", {
			method: 'POST',
			mode: config.cors,
			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
			body: "id=" + key
		})
		.then(res => { return res.json() })
		.then(rep => {
			let list = rep.status == 200 && rep.result ? rep.result.courses : null;
			let experienceList = list !== null && list.length > 0 ? list.filter(function (item) {
				return item.name != ''
			}) : '暂时没有参加课程';
			Modal.info({
				title: '已参加课程',
				content: (
					<div>
						{
							experienceList !== '暂时没有参加课程'?
							experienceList.map((item, index) => {
								return <p>课程{index+1}:{item.name}</p>
							})
							:
							<p>暂时没有参加课程</p>
						}
					</div>
				)
			});
			tDate[num].showExpress = false;
			this.setState({tDate});
		})
		.catch((e) => { 
			console.log(e)
			message.error("网络错误请稍后重试");
		})
	}
	componentDidMount() {
		this.getList()
	}

	render() {
		const { tDate, totalPage, currentPage, showExpress } = this.state;

		const pagination = {
			total: totalPage,
			showSizeChanger: true,
			onChange:(current)=>{
				this.setState({ currentPage: current });
			}
		}
		const columns = [{
			title: '学员名称',
			dataIndex: 'realName',
			width: '10%'
		}, {
			title: '手机号码',
			dataIndex: 'phone',
			width: '10%'
		}, {
			title: '身份证',
			dataIndex: 'idCardNum',
			width: '10%'
		}, {
			title: '电子邮件',
			dataIndex: 'email',
			width: '10%'
		}, {
			title: '地址',
			dataIndex: 'address',
			width: '10%'
		}, {
			title: '操作',
			dataIndex: 'operation',
			width: '35%',
			render: (text, record, index) => {
				let textlist = []
				return (<div>
						<Button type="primary" onClick={() => this.checkExperience(index, tDate[index+ (currentPage-1)*10].key)} loading={tDate[index].showExpress}>查看培训经历</Button>
							&nbsp;&nbsp;
            <Link to={{ pathname: '/studentUpdate', state: tDate[index + (currentPage-1)*10].key }}><Button >修改</Button></Link>
				</div>);
			},
		}];
		return <Table bordered dataSource={tDate} columns={columns} pagination={pagination} loading={this.state.loading} className="animated fadeInUp " />;
	}
}